view {
  box-sizing: border-box;
}

page {
  background-color: #e7f0fd;
  height: 100%;
}

.check-in {
  background-color: #fff;
  padding-top: 204rpx;
  height: calc(100% - 64rpx - env(safe-area-inset-bottom));
  width: calc(100% - 64rpx);
  margin: 32rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  .main-btn {
    background: linear-gradient(180deg, #73a9ff 0%, #335eff 100%);
    box-shadow: 0px 10px 10px rgba(38, 92, 255, 0.23);
    width: 336rpx;
    height: 336rpx;
    box-sizing: border-box;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .text {
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 48rpx;
      /* 150% */
    }

    .time {
      color: #fff;
      font-family: Arial;
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      margin-top: 32rpx;
    }

    .splitIcon {
      animation: twinkle .5s infinite alternate;
    }

    @keyframes twinkle {
      0% {
        opacity: 1;
      }

      25% {
        opacity: 1;
      }

      75% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }
  }

  .main-btn-done {
    border: solid 12rpx #3b67ff;
    width: 336rpx;
    height: 336rpx;
    box-sizing: border-box;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .text {
      color: #333;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 48rpx;
      /* 150% */
    }

    .time {
      color: #333;
      font-family: Arial;
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      margin-top: 32rpx;
    }
  }

  .address-group {
    display: flex;
    align-items: center;
    padding: 0 64rpx;
    margin-top: 68rpx;
    overflow: hidden;
    width: 100%;
    justify-content: center;

    .icon {
      height: 36rpx;
      width: 36rpx;
      flex-shrink: 0;
    }

    .text {
      margin-left: 16rpx;
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 48rpx;
      // text-align: center;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      // overflow: hidden;
    }
  }
}

.btn {
  margin-top: 180rpx;

  .check-btn {
    height: 88rpx;
    font-size: 32rpx;
  }
}